<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>用户登录页面</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <style type="text/css">

        table tr td {
            padding: 10px;
        }

    </style>
</head>
<body>
<div style="padding: 20px">
    <form name="myForm" class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" id="userName" name="userName" placeholder="请输入用户名" class="layui-input"
                       style="width: 200px">&nbsp;&nbsp;
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密 &nbsp;&nbsp;&nbsp;码：</label>
            <div class="layui-input-block">
                <input type="password" id="password" name="password" placeholder="请输入密码" class="layui-input"
                       style="width: 200px">&nbsp;&nbsp;
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验 &nbsp;&nbsp;&nbsp;证：</label>
            <div class="layui-input-block">
                <div data-vid="5d8474d0fc650e5af4ec42f7" style="width: 200px;height: 36px;">
                    <div class="vaptcha-init-main">
                        <div class="vaptcha-init-loading">
                            <a href="/" target="_blank">
                                <img src="https://cdn.vaptcha.com/vaptcha-loading.gif"/>
                            </a>
                            <span class="vaptcha-text">Vaptcha启动中...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <div class="layui-input-block">
                <input type="checkbox" id="rememberMe" value="rememberMe" lay-skin="primary" title="记住密码">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="sbtn" class="layui-btn" onclick="submitData();return false;">登录</button>
                &nbsp;&nbsp;<font id="errorInfo" color="red"></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a
                    href="javascript:parent.showFindPassword()">忘记密码</a>
            </div>
        </div>
    </form>

</div>
<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.js}" type="text/javascript"></script>
<script th:src="@{/js/common.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.cookie.js}" type="text/javascript"></script>
<script src="https://cdn.vaptcha.com/v2.js"></script>
<script>

    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
    });

    function submitData() {
        if ($("#userName").val().trim() == "") {
            $("#errorInfo").text("请输入用户名！");
            $("#userName").focus();
            return false;
        }

        if ($("#password").val().trim() == "") {
            $("#errorInfo").text("请输入密码！");
            $("#password").focus();
            return false;
        }

        if (myForm.vaptcha_token.value == "") {
            $("#errorInfo").text("请进行人机验证！");
            return false;
        }

        var rememberMe = $("#rememberMe").prop('checked');

        var index = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });
        $("#sbtn").attr('disabled', true);
        $.post("/login", {
            username: $("#userName").val().trim(),
            password: $("#password").val().trim(),
            rememberMe: rememberMe,
            vaptcha_token: myForm.vaptcha_token.value
        }, function (result) {
            layer.close(index);
            $("#sbtn").attr('disabled', false);
            if (result.code == 0) {
                parent.reloadPage();
            } else {
                $("#errorInfo").text(result.msg);
                if ('人机验证失败！' == result.msg) {
                    alert('人机验证失败！');
                    window.location.reload();
                }
            }
        }, "json");

        if (rememberMe) { // 记住密码
            $.cookie('user', $("#userName").val().trim() + '-' + $("#password").val().trim(), {expires: 7});
        }
    }


    $(function () {

        var user = $.cookie('user');
        if (typeof (user) != "undefined") {
            var userNameAndPassword = user.split("-");
            $("#userName").val(userNameAndPassword[0])
            $("#password").val(userNameAndPassword[1])
        }
    });

</script>


</body>
</html>